<template>
  <div class="testInputNumber">
    <h1>InputNumber 数字输入框</h1>
    <p>使用鼠标或键盘输入一定范围的标准数值。</p>
    <h2>基础用法</h2>
    <InputNumber :max="10" :min="1" :value="1"></InputNumber>
    <p>可以通过输入、鼠标点击或键盘的上下键来改变数值大小。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;InputNumber :max=&quot;10&quot; :min=&quot;1&quot; :value=&quot;1&quot;&gt;&lt;/InputNumber&gt;
      &lt;/template&gt;
      &lt;script&gt;
        export default {

        }
      &lt;/script&gt;
    </pre>
    <h2>小数</h2>
    <InputNumber :max="10" :min="1" :step="1.2" :value="1"></InputNumber>
    <p>通过设置 <code>step</code> 属性控制每次改变的精度。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;InputNumber :max=&quot;10&quot; :min=&quot;1&quot; :step=&quot;1.2&quot; :value=&quot;1&quot;&gt;&lt;/InputNumber&gt;
      &lt;/template&gt;
      &lt;script&gt;
        export default {

        }
      &lt;/script&gt;
    </pre>
    <h2>尺寸</h2>
    <InputNumber :value="2" size="large"></InputNumber>
    <InputNumber :value="2" size="small"></InputNumber>
    <p>通过设置 <code>size</code> 属性为 <code>large</code> 和 <code>small</code> 将输入框设置为大(默认)和小尺寸。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;InputNumber :value=&quot;2&quot; size=&quot;large&quot;&gt;&lt;/InputNumber&gt;
        &lt;InputNumber :value=&quot;2&quot; size=&quot;small&quot;&gt;&lt;/InputNumber&gt;
      &lt;/template&gt;
      &lt;script&gt;
        export default {

        }
      &lt;/script&gt;
    </pre>
    <h2>不可用</h2>
    <InputNumber :value="1" :disabled="disabled"></InputNumber>
    <Button type="primary" @click="disabled = !disabled">禁用开关</Button>
    <p>通过设置 <code>disabled</code> 属性禁用输入框，点击按钮切换状态。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;InputNumber :value=&quot;1&quot; :disabled=&quot;disabled&quot;&gt;&lt;/InputNumber&gt;
        &lt;Button type=&quot;primary&quot; @click=&quot;disabled = !disabled&quot;&gt;禁用开关&lt;/Button&gt;
      &lt;/template&gt;
      &lt;script&gt;
        export default {
          data () {
            return {
              disabled: true
            }
          }
        }
      &lt;/script&gt;
    </pre>
    <h1>API</h1>
    <p>InputNumber props</p>
    <Table :columns="tableColumn" :data="tableData"></Table>
    <br>
    <p>InputNumber events</p>
    <Table :columns="tableColumn1" :data="tableData1"></Table>
  </div>
</template>

<script>
export default {
  name: 'TestInputNumber',
  data () {
    return {
      disabled: true,
      tableColumn: [
        {
          title: '属性',
          key: 'attribute'
        },
        {
          title: '说明',
          width: 400,
          key: 'explain',
          tooltip: true
        },
        {
          title: '类型',
          key: 'type'
        },
        {
          title: '默认值',
          key: 'default'
        }
      ],
      tableData: [
        {
          attribute: 'value',
          explain: '当前值。需要使用.sync双向绑定，否则改变值时并不能改变使用者的数据。',
          type: 'Number',
          default: '1'
        },
        {
          attribute: 'max',
          explain: '最大值',
          type: 'Number',
          default: 'Infinity'
        },
        {
          attribute: 'min',
          explain: '最小值',
          type: 'Number',
          default: 'Infinity'
        },
        {
          attribute: 'step',
          explain: '每次改变的步伐，可以是小数',
          type: 'Number',
          default: '1'
        },
        {
          attribute: 'size',
          explain: '输入框尺寸，可选值为large和small或者不填',
          type: 'String',
          default: '-'
        },
        {
          attribute: 'disabled',
          explain: '设置禁用状态',
          type: 'Boolean',
          default: 'false'
        }
      ],
      tableColumn1: [
        {
          title: '事件名',
          key: 'event',
          width: 200
        },
        {
          title: '说明',
          key: 'type'
        },
        {
          title: '返回值',
          key: 'callback'
        }
      ],
      tableData1: [
        {
          event: 'on-change',
          type: '数值改变时的回调，返回当前值',
          callback: '当前值'
        }
      ]
    }
  }
}
</script>

<style scoped lang="less">
h1 {
  font-size: 18px;
  padding: 10px 0;
}
h2 {
  font-size: 14px;
  padding: 10px 0;
}
code {
  background-color: #aaa;
}
pre {
  font-size: 14px;
}
span {
  margin-left: 10px;
}
p {
  padding: 10px 0;
}
</style>
